<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" class="upload">
    <img src="" alt="" class="my-img">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector('.upload').addEventListener(
            'change', e=>{
                const fd = new FormData()
                fd.append('img', e.target.files[0])

                axios({
                    url:'http://hmajax.itheima.net/api/uploadimg',
                    method:'POST',
                    data: fd
                }).then(
                    res =>{
                        console.log(res);
                        const imgUrl = res.data.data.url
                        document.querySelector('.my-img').src = imgUrl
                    }
                )
            }
        )
    </script>
</body>
</html>